<template>
	
<ge-page id="ge-page" >
  <view class="box">
    <!-- 订单状态 -->
    <view class="order-status" v-if="order.delivery_type ==10">外卖订单（{{order.state_text}}）</view>
	<view class="order-status" v-if="order.delivery_type ==20">堂食订单（{{order.state_text}}）</view>
	<view class="shop-cont">
		<view class="shop-name">
			<view class="label">下单人：</view><view class="cont">{{hideMiddleChar(order.user.name)}}</view>
		</view>
		<view class="shop-name" v-if="order.delivery_type ==10 && order.pay_status == 20">
			<view class="label">收货地址</view><view class="cont">{{order.address.name}}--{{order.address.region.city}}{{order.address.region.region}}{{order.address.detail}}</view>
		</view>
		<view class="shop-name">
			<view class="label">联系电话</view><view class="cont">{{order.user.mobile}}</view>
		</view>
	</view>
	<view class="goods-list i-card">
	  <view class="goods-item"  v-for="(goods, idx) in order.goods" :key="idx">
	    <view class="goods-main" >
	      <!-- 商品图片 -->
	      <view class="goods-image">
	        <image class="image"  :src="goods.goods_image"  mode="scaleToFill"></image>
	      </view>
	      <!-- 商品信息 -->
	      <view class="goods-content">
	        <view class="goods-title"><text class="twoline-hide">{{ goods.goods_name }}</text></view>
	        <view class="goods-props clearfix">
	          <view class="goods-props-item" v-for="(props, idx) in goods.goods_props" :key="idx">
	            <text>{{ props.value.name }}</text>
	          </view>
	        </view>
	      </view>
	      <!-- 交易信息 -->
	      <view class="goods-trade">
	        <view class="goods-price">
	          <text class="unit">￥</text>
	          <text class="value">{{ goods.is_user_grade ? goods.grade_goods_price : goods.goods_price }}</text>
	       </view>
		   <view class="goods-num">
		     <text>×{{ goods.total_num }}</text>
		   </view>
	      </view>
	    </view>
	           <!-- 商品售后 -->
	    <view class="goods-refund">
	        <text  v-if="goods.refund"  class="stata-text">处理售后</text>
	    </view>
	 </view>
	</view>
	        
		 
			
			
			<!-- 订单信息 -->
			<view class="order-info i-card"> 
			  <view class="info-item">
			    <view class="item-lable">订单编号</view>
			    <view class="item-content">
			      <text>{{ order.order_no }}</text>
			      <view class="act-copy" @click="handleCopy(order.order_no)">
			        <text>复制</text>
			      </view>
			    </view>
			  </view>
			  <view class="info-item">
			    <view class="item-lable">下单时间</view>
			    <view class="item-content">
			      <text>{{ order.create_time }}</text>
			    </view>
			  </view>
			  <view class="info-item" v-if="order.delivery_type == 20">
			    <view class="item-lable">核销时间</view>
			    <view class="item-content">
			      <text>{{ order.delivery_time }}</text>
			    </view>
			  </view>
			  <view class="info-item" v-if="order.delivery_type == 10">
			    <view class="item-lable">配送时间</view>
			    <view class="item-content">
			      <text>{{ order.delivery_time }}</text>
			    </view>
			  </view>
			  <view class="info-item">
			    <view class="item-lable">买家留言</view>
			    <view class="item-content">
			      <text>{{ order.buyer_remark ? order.buyer_remark : '--' }}</text>
			    </view>
			  </view>
			</view>
			
			<!-- 结算信息 -->
			<view class="trade-info i-card">
			  <view class="info-item">
			    <view class="item-lable">订单金额</view>
			    <view class="item-content">
			      <text>￥{{ order.total_price }}</text>
			    </view>
			  </view>
			  <view  v-if="order.coupon_money > 0"  class="info-item">
			    <view class="item-lable">优惠券抵扣</view>
			    <view class="item-content">
			      <text>-￥{{ order.coupon_money }}</text>
			    </view>
			  </view>
			  <view v-if="order.points_money > 0" class="info-item">
			    <view class="item-lable">{{ setting.points_name }}抵扣</view>
			    <view class="item-content">
			      <text>-￥{{ order.points_money }}</text>
			    </view>
			  </view>
			  <view class="info-item">
			    <view class="item-lable">运费</view>
			    <view class="item-content">
			      <text>+￥{{ order.express_price }}</text>
			    </view>
			  </view>
			  <view  class="info-item">
			    <view class="item-lable">后台改价</view>
			    <view class="item-content">
			      <text>{{ order.update_price.symbol }}</text>
			      <text>￥{{ order.update_price.value }}</text>
			    </view>
			  </view>
			  <view class="divider"></view>
			  <view class="trade-total">
			    <text class="lable">实付款</text>
			    <view class="goods-price">
			      <text class="unit">￥</text>
			      <text class="value">{{ order.pay_price }}</text>
			    </view>
			  </view>
			</view>
			
			
    </view>
  </ge-page>
</template>

<script> 
export default {
		data() {
			return {
				orderId:null,
				order:{} 
			}
		},
		onShow() {
			
		},
		onLoad(option) {
			this.orderId = option.orderid
		},
		created() {
			this.getOrderDetail()
		},
		methods:{
			hideMiddleChar(name) {  
			  if (name.length <= 2) {  
			    // 姓名长度小于等于2时，不隐藏任何字符  
			    return name.substring(0, 1) + '*' 
			  } else {  
			    // 姓名长度大于2时，隐藏中间的一个字符  
			    return name.substring(0, 1) + '*' + name.substring(2);  
			  }  
			},
			getOrderDetail(){
				let app = this
				//https://dingcan.kenleader.com/index.php?s=/store/order/detail&orderId=72
				uni.api.getOrderDetail({ orderId: app.orderId}).then(res => { 
					 if(!res.err){
						 app.order = res.detail
					 }
					 else{
						 
					 }
				})
			},
			 // 复制指定内容
			 handleCopy(value) {
			   const app = this
			   uni.setClipboardData({
				 data: value,
				 success: () => app.$toast('复制成功'),
				 fail: ({ errMsg }) => app.$toast('复制失败 ' + errMsg)
			   })
			 },
		}
	 }
</script>

<style lang="scss" scoped>
	#ge-page,.box{
		background-color: #fafafa;
	}
  .order-status{
	  height: 100px;
	  width: 100%;
	  background-color: #ff8358;
	 
	  padding: 50rpx 50rpx 0;
	  box-sizing: border-box;
	  color: #fff;
	font-size: 45rpx;
	font-weight: bold;
  }
  .shop-cont{
	  width: 690rpx;
	  padding: 20rpx;
	  box-sizing: border-box;
	  background-color: #fff;
	  margin: -50rpx auto 0;
	  border-radius: 20rpx;
	  .shop-name{
		  display: flex;
		  margin-bottom: 5rpx;
		   font-size: 28rpx;
		  .label{
			  color: #888;
			 width: 150rpx;
			
		  }
		  .cont{
			  width: calc(100% - 120rpx);
		  }
	  }
  }
  .i-card{
	  width: 690rpx;
	  padding: 20rpx;
	  box-sizing: border-box;
	  background-color: #fff;
	  margin: 20rpx auto 0;
	  border-radius: 20rpx;
  }
  // 商品列表
  .goods-list {
  
    // 商品项
    .goods-item {
      margin-bottom: 40rpx;
  
      &:last-child {
        margin-bottom: 0;
      }
  
      // 商品信息
      .goods-main {
        display: flex;
      }
  
      // 商品图片
      .goods-image {
        width: 180rpx;
        height: 180rpx;
  
        .image {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }
  
      // 商品内容
      .goods-content {
        flex: 1;
        padding-left: 16rpx;
        padding-top: 16rpx;
  
        .goods-title {
          font-size: 26rpx;
          max-height: 76rpx;
        }
  
        .goods-props {
          margin-top: 14rpx;
          color: #ababab;
          font-size: 24rpx;
          overflow: hidden;
  
          .goods-props-item {
            padding: 4rpx 16rpx;
            border-radius: 12rpx;
            background-color: #fcfcfc;
          }
        }
  
  
      }
  
      // 交易信息
      .goods-trade {
        padding-top: 16rpx;
        width: 150rpx;
        text-align: right;
        color: $uni-text-color-grey;
        font-size: 26rpx;
  
        .goods-price {
          vertical-align: bottom;
          margin-bottom: 16rpx;
  
          .unit {
            margin-right: -2rpx;
            font-size: 24rpx;
          }
        }
		.goods-num {
			color: #000;
			font-size: 34rpx;
			font-weight: bold;
		}
      }
  
      // 商品售后
      .goods-refund {
        display: flex;
        justify-content: flex-end;
  
        .stata-text {
          font-size: 24rpx;
          color: #999;
        }
  
        .action-btn {
          border-radius: 28rpx;
          padding: 8rpx 26rpx;
          font-size: 24rpx;
          color: #383838;
          border: 1rpx solid #a8a8a8;
        }
  
      }
  
    }
  
  }
  // 订单信息
  .order-info {
  
    .info-item {
      display: flex;
      margin-bottom: 24rpx;
  
      &:last-child {
        margin-bottom: 0;
      }
  
      .item-lable {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;
        margin-right: 30rpx;
      }
  
      .item-content {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #333;
  
        .act-copy {
          margin-left: 20rpx;
          padding: 2rpx 20rpx;
          font-size: 22rpx;
          color: #666;
          border: 1rpx solid #c1c1c1;
          border-radius: 16rpx;
        }
      }
    }
  
  }
  
  // 交易信息
  .trade-info {
  
    .info-item {
      display: flex;
      margin-bottom: 24rpx;
  
      .item-lable {
        font-size: 24rpx;
        color: #999;
        margin-right: 24rpx;
      }
  
      .item-content {
        flex: 1;
        font-size: 26rpx;
        color: #333;
        text-align: right;
      }
    }
  
    .divider {
      height: 1rpx;
      background: #f1f1f1;
      margin-bottom: 24rpx;
    }
  
    .trade-total {
      display: flex;
      justify-content: flex-end;
  
      .goods-price {
        margin-left: 12rpx;
        vertical-align: bottom;
        color: darkred;
  
        .unit {
          margin-right: -2rpx;
          font-size: 24rpx;
        }
      }
    }
  
  }
  .show-code{
  	  display: flex;
  	  justify-content: center;
  }
</style>